<template>
  <el-card class="resume-card">
    <h2>我的简历</h2>
    <el-button type="primary" @click="generateResume" :loading="loading">一键生成简历</el-button>
    <el-divider />
    <div class="empty">生成简历成功</div>
    <el-dialog v-model="showDialog" title="简历内容" width="700px">
      <div v-if="resumeContent" style="max-height: 500px; overflow: auto;">
        <v-md-preview :text="resumeContent" />
      </div>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/style/preview.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VMdPreview.use(vuepressTheme, { Prism });

const loading = ref(false)
const showDialog = ref(false)
const resumeContent = ref('')

const generateResume = async () => {
  loading.value = true
  try {
    const res = await axios.get('/student/resume/generate')
    resumeContent.value = res.data || res || ''
    showDialog.value = true
  } catch (e) {}
  loading.value = false
}
</script>

<style scoped>
/* 学生端简历卡片样式 */
.resume-card {
  max-width: 1100px; /* 和岗位列表保持相同的最大宽度 */
  margin: 40px auto; /* 居中显示，抵消内容区的内边距影响 */
  padding: 30px 20px; /* 内边距和岗位列表统一 */
  box-sizing: border-box;
}
.empty {
  color: #888;
  text-align: center;
  margin: 40px 0;
}
</style>

<style>
.v-md-preview,
.v-md-preview-content {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}
</style>